<template>
  <el-dialog title="题目预览" :visible="value" @close="closeDialog" width="60%">
    <el-row>
      <el-col :span="6">
        <div class="grid-content">
          【题型】：
          {{
            questionDetail.questionType == 1
              ? "单选"
              : questionDetail.questionType == 2
              ? "多选"
              : "简单"
          }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">【编号】:{{ questionDetail.id }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          【难度】：{{
            questionDetail.difficulty == 1
              ? "简单"
              : questionDetail.difficulty == 2
              ? "一般"
              : "困难"
          }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          【标签】：{{ questionDetail.subjectName }}
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"
        ><div class="grid-content">
          【学科】：{{ questionDetail.subjectName }}
        </div></el-col
      >
      <el-col :span="6">
        <div class="grid-content">
          【目录】：{{ questionDetail.directoryName }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">【方向】：{{ questionDetail.direction }}</div>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col :span="6"><div class="grid-content">【题干】：</div></el-col>
    </el-row>
    <p v-html="questionDetail.question" style="color: blue"></p>
    <P v-if="questionDetail.questionType == 1 || 2"
      >{{
        questionDetail.questionType == 1 ? "单选题" : "多选题"
      }}
      选项：（以下选中的选项为正确答案）</P
    >
    <!-- 单选题 -->
    <div v-if="questionDetail.questionType == 1">
      <el-radio-group :value="questionDetail.questionType">
        <div v-for="(item, index) in questionDetail.options" :key="index">
          <el-radio :label="item.title"> </el-radio>
        </div>
      </el-radio-group>
    </div>
    <!-- 多选题 -->
    <!-- <div v-else-if="questionDetail.questionType == 2">
    <el-checkbox-group :value="questionDetail.questionType">
      <div v-for="(item, index) in questionDetail.options" :key="index">
        <el-checkbox :label="item.title" name="type" ></el-checkbox>
      </div>
    </el-checkbox-group>
  </div> -->
    <!-- 简答题 -->
    <!-- <div v-else>
     <el-radio-group :value="questionDetail.questionType">
      <el-radio label="线上品牌商赞助"></el-radio>

      <el-radio label="线上品牌商赞助"></el-radio>

      <el-radio label="线上品牌商赞助"></el-radio>

      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </div> -->
    <!-- 简答多选ti -->
    <div v-if="questionDetail.questionType === '1'" class="danxuan">
      <el-radio-group v-model="radio">
        <el-radio
          style="display: block; margin: 10px 0"
          :label="item.id"
          v-for="item in questionDetail.options"
          :key="item.id"
          >{{ item.code }}.{{ item.title }}</el-radio
        >
      </el-radio-group>
    </div>
    <div class="duoxuan" v-if="questionDetail.questionType === '2'">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          style="display: block; margin: 10px 0"
          :label="item.id"
          v-for="item in questionDetail.options"
          :key="item.id"
        ></el-checkbox>
      </el-checkbox-group>
    </div>
    <hr />
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【参考答案】：<el-button type="danger">视频答案预览</el-button>
        </div></el-col
      >
    </el-row>
    <hr />
    <el-row>
      <el-col :span="6">
        【答案解析】:<span
          class="grid-content bg-purple"
          v-html="questionDetail.answer"
        ></span
      ></el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【题目备注】：{{ questionDetail.remarks }}
        </div></el-col
      >
    </el-row>
    <hr />

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="closeDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'questionPreviewDialog',
  props: {
    // 接受id
    id: {
      type: [Number, String],
      required: true
    },
    value: {
      type: [String, Boolean],
      required: true
    }
  },
  data () {
    return {
      questionDetail: {}
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    // 打开弹出框函数
    closeDialog () {
      this.$emit('input', false)
    },
    // 获取题目详情
    async getDetail () {
      const res = await detail(this.id)
      console.log(res.data)
      this.questionDetail = res.data
      console.log(5555)
      console.log(this.questionDetail)
      console.log(5555)
    }
  }
}
</script>

<style scoped lang='less'></style>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 15px;
}
::v-deep .el-checkbox-group .el-checkbox {
  display: block;
}
</style>
